<template>
	<div class="star" :class="starType">
		<span
			class="star-item"
			v-for="(itemClass, index) in itemClasses"
			:class="itemClass"
			:key="index"
		></span>
	</div>
</template>

<script type="text/javascript">
	const LENGTH = 5;
	const CLS_ON = 'on';
	const CLS_HALF = 'half';
	const CLS_OFF = 'off';

	export default {
		name: 'Star',
		props: {
			size: {
				type: Number
			},
			score: {
				type: Number
			}
		},
		computed: {
			starType() {
				return `star-${this.size}`
			},
			itemClasses() {
				var starClass = [];
				const score = Math.floor(this.score * 2) / 2;
				const intDecimal = score % 1 !== 0;
				const ingeter = Math.floor(score);
				for(let i = 0; i < ingeter; i++) {
					starClass.push(CLS_ON)
				}
				if(intDecimal) {
					starClass.push(CLS_HALF)
				}
				while(starClass.length < LENGTH){
					starClass.push(CLS_OFF)
				}
				return starClass
			}
		}
	}
</script>


<style lang="stylus" scoped>
	@import '../../common/stylus/mixin'
	.star
		display: flex
		align-items: center
		justify-content: center
		.star-item
			background-repeat: no-repeat
		&.star-24
			.star-item
				width: 15px
				height: 15px
				margin: 0 6px
				background-size: 15px 15px
				&.on
					bg-image('star24_on')
				&.half
					bg-image('star24_half')
				&.off
					bg-image('star24_off')
		&.star-36
			.star-item
				width: 22px
				height: 22px
				margin: 0 6px
				background-size: 22px 22px
				&.on
					bg-image('star36_on')
				&.half
					bg-image('star36_half')
				&.off
					bg-image('star36_off')
		&.star-48
			.star-item
				width: 30px
				height: 30px
				margin: 0 11px
				background-size: 30px 30px
				&.on
					bg-image('star48_on')
				&.half
					bg-image('star48_half')
				&.off
					bg-image('star48_off')
</style>